<div class="pld-page">
  <div class="mb-md">
    <button (click)="showCreate()" nz-button nzType="primary"><i nz-icon type="plus"></i>创建角色</button>
  </div>
  <div class="pld-warpper-table">
    <nz-table #basicTable
              [nzData]="roleList"
              [nzFrontPagination]="false"
              [nzLoading]="loading"
              [nzShowPagination]="false">
      <thead>
      <tr>
        <th width="60">ID</th>
        <th width="100">角色</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let item of basicTable.data">
        <td class="text-nowrap">{{item.id}}</td>
        <td class="text-nowrap">{{item.title}} <span class="text-grey" *ngIf="item.des">({{item.des}})</span></td>
        <td class="text-nowrap">
          <button (click)="showUpdate(item)" nz-button nzType="default"><i nz-icon type="edit"></i></button>
          <button (click)="openPermissionDrawer(item.id,item.title)" nz-button nzType="primary">
            <i nz-icon type="setting" theme="outline"></i>
          </button>
          <button (nzOnConfirm)="deleteRole(item.id)" class="ml-sm" nz-button
                  nz-popconfirm nzPlacement="left" nzTitle="确认删除?" nzType="danger">
            <i nz-icon type="delete"></i>
          </button>
        </td>
      </tr>
      </tbody>
    </nz-table>
  </div>
</div>
<pld-permission-role-drawer #drawer></pld-permission-role-drawer>

<nz-modal *ngIf="roleModal.form!=null" [(nzVisible)]="roleModal.visible" [nzTitle]="roleModal.title"
          (nzOnCancel)="roleModal.visible = false"
          (nzOnOk)="saveRole()" [nzOkLoading]="roleModal.loading">
  <form nz-form [formGroup]="roleModal.form">
    <nz-form-item>
      <nz-form-label [nzRequired]="true" [nzSpan]="4" nzFor="title">角色名称</nz-form-label>
      <nz-form-control [nzSpan]="20" nzHasFeedback>
        <input type="text" nz-input formControlName="title" placeholder="请输入角色名称"/>
        <nz-form-explain *ngIf="roleModal.form.get('title').dirty && roleModal.form.get('title').errors">
          <ng-container *ngIf="roleModal.form.get('title').hasError('required')">
            角色名称不能为空
          </ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzRequired]="true" [nzSpan]="4" nzFor="des">角色描述</nz-form-label>
      <nz-form-control [nzSpan]="20" nzHasFeedback>
        <input type="text" nz-input formControlName="des" placeholder="请输入角色描述"/>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>

